<template>
	<view class="ModifyPicture">
		<view class="login_logo">
			<image class="image" :src="picurl" mode="aspectFit"></image>
			<button type="primary" :loading="loading" :disabled="disabled" @click="Choicepic">修改图片</button>
		</view>
		<!-- <view class="box">
			<view>
				<progress :percent="percent" stroke-width="4"></progress>
			</view>
			<button type="primary" :loading="loading" :disabled="disabled" @click="upload">确定修改</button>
		</view> -->
	</view>
</template>

<script>
	var _self;
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['token']),
		data() {
			return {
				percent: 0,
				loading: false,
				disabled: false,
				picurl: '',
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData: function(type) {
				const _this = this;
				//获取用户信息
				this.$request.get("/api/user/getUserInfo", {})
					.then(res => {
						if (res.data.code == 1) {
							_this.picurl = 'http://www.huanqiuyt.com' + res.data.data.user.avatar;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
			//选择图片
			Choicepic: function() {
				_self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						_self.picurl = tempFilePaths[0];
						uni.redirectTo({
							url: '../upload/upload?src=' + _self.picurl
						});
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			//上传图片
			upload: function() {
				_self = this;

				// if(_self.picurl.indexOf('blob:') == -1){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请选择图片'
				// 	});
				// 	return
				// }

				const uploadTask = uni.uploadFile({
					url: 'http://www.huanqiuyt.com/api/user/setAvatar',
					filePath: _self.picurl,
					name: 'img',

					header: {
						'token': _self.token,
					},
					formData: {
						// 'user': 'test'
					},
					success: function(uploadFileRes) {
						if (JSON.parse(uploadFileRes.data).code == 1) {
							uni.showToast({
								icon: 'none',
								title: "修改成功！"
							});
							uni.reLaunch({
								url: '../my/my',
							});
						}
					}
				});
				uploadTask.onProgressUpdate(function(res) {
					_self.percent = res.progress;
					console.log('上传进度' + res.progress);
					console.log('已经上传的数据长度' + res.totalBytesSent);
					console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
				});
			}
		}
	}
</script>

<style lang="less">
	.ModifyPicture {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-top: 5px solid #F1F1F1;

		.login_logo {
			flex: 1;
			width: 60%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			.image {
				width: 300upx;
				height: 300upx;
			}
		}

		.box {
			height: 30%;
			width: 60%;

			button {
				margin-top: 20px;
			}
		}
	}
</style>
